<template>
    <swiper :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <swiper-slide v-for="(item, i) in swiperDatas" :key="i">
            <div class="imgs">
                <img :src="item.pic_info.url">                
            </div>
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
    components: {
        swiper,
        swiperSlide
    },
    name: 'swiperBanner',
    data() {
        return {
            swiperDatas: [],
            swiperOption: {
                pagination: {
                    el: '.swiper-pagination',
                },
                autoplay: true
            }
        }
    },
    created() {
        this.axios.get('https://v1.itooi.cn/tencent/banner')
            .then((res)=>{
                this.swiperDatas = res.data.data
            })
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.swiper
        }
    },
    mounted() {

    },
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.swiper-container 
    height 100%
.imgs
    height 100%
    position relative
    overflow hidden
    img 
        position absolute
        left 50%
        top 0px
        transform translateX(-50%)
        height 100%
        min-width 100%
</style>